import { Button, Input } from 'antd';
import { Row } from "../../components/lib";
import { useTaskSearchParams } from "./util";
import { useSetSearchUrlParam } from "../../utils/useUrlQueryParam";
import { TaskTypeSelect } from '../../components/task-type-select';
import { UserSelect } from '../../components/user-select';

export const SearchPanel = () => {
    const searchParams = useTaskSearchParams();
    const setSearchParams = useSetSearchUrlParam();
    return (
        <Row gap={true} marginBottom={4}>
            <Input
                style={{ width: '200px' }}
                placeholder={'任务名'}
                value={searchParams.name}
                onChange={(evt) => setSearchParams({ name: evt.target.value })}
            />
            <UserSelect
                defaultOptionName={"经办人"}
                value={searchParams.processorId}
                onChange={(id) => setSearchParams({ processorId: id })}
            />
            <TaskTypeSelect
                defaultOptionName={"类型"}
                value={searchParams.typeId}
                onChange={(id) => setSearchParams({ typeId: id })}
            />
            <Button onClick={() => setSearchParams({ name: '', processorId: '', typeId: '' })}>清除筛选器</Button>
        </Row>
    )
}